原文來自: jQuery 1.7 透過 on 來綁定事件

既上一篇作者寫了 Javascript 前端工具 Backbone.js Framework 初學介紹，這次來將程式改寫成 jQuery 寫法，藉這個機會來介紹 jQuery 新功能 on API，底下來看看 jQuery event handle 的演進

//在 jQuery 1.3 以上版本
$(selector).live(events, data, handler);
//在 jQuery 1.4.3 以上版本
$(document).delegate(selector, events, data, handler);
//在 jQuery 1.7 以上版本
$(document).on(events, selector, data, handler);

上面三種寫法都可以榜定網頁上全部元件，如果只是單純只是用 click bind event 的話，那只要新增的元件就無法作用，講得有點抽象，底下直接看個例子:

html 程式碼:

<div class="container well">
    <h1>jQuery Click Event</h1>
    <p> </p>
    <button class="btn btn-primary add">Click me to add new item</button>
    <ul style="margin-top:5px;margin-bottom:5px;" class="li">
        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>
        <li style="margin-top:5px; font-size:1.2em">I am old item.  <button class="btn btn-danger delete">Delete</button></li>
    </ul>
</div>

jQuery Click 事件

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function ($) {
    $(".add").click(function(){
        $(".li").append('<li style="margin-top:5px; font-size:1.2em">I am new item.  <button class="btn btn-danger delete">Delete</button></li>');
    });
    $(".delete").click(function(){
        $(this).parent().remove();
    });
})(jQuery);
</script>

上面例子，大家可以發現只要是透過 button 新增加的 li element 都不可以被刪除，原因就是在 .delete 是 bind 在 click 事件。這時候就要用 jQuery.on API 來重新實做，其實很簡單，只要將 click 改成 on 就完成了，請取代底下程式碼。

$(".delete").click(function(){
    $(this).parent().remove();
});

換成

$(document).on('click', '.delete', function(event){
    $(this).parent().remove();
});

直接看 Demo 範例，這樣可以更直接瞭解。